<template>
  <svg class="icon" :style="iconStyle">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
{
  const _require = require.context('@/assets/icons', true, /\.svg$/)
  _require.keys().forEach(key => _require(key))
}

const COMPONENT_NAME = 'icon'
@Component({
  name: COMPONENT_NAME
})
export default class Icon extends Vue {
  @Prop({ default: '', required: true }) private icon!:string
  @Prop({ default: 24 }) private size!:string|number
  @Prop({ default: '' }) private color!:string

  private get iconName () {
    return `#icon-${this.icon}`
  }

  private get iconStyle () {
    let { size, color } = this.$props
    return {
      width: `${size}px`,
      height: `${size}px`,
      color
    }
  }
}
</script>

<style lang="stylus">
  .icon {
    display: inline-block;
    fill: currentColor;
    vertical-align: middle;
    overflow: hidden;
  }
</style>
